<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        <el-row>
            <el-col :span="8">
                <el-input placeholder="请输入订单名称" clearable>
                    <template #append>
                        <el-button :icon="Search" />
                    </template>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="orderTable.data">
                <el-table-column type="index" width="50" />
                <el-table-column label="用户名称" prop="user" width="150"></el-table-column>
                <el-table-column label="订单价格" prop="price" width="150"></el-table-column>
                <el-table-column label="订单数量" prop="number" width="150"></el-table-column>
                <el-table-column label="支付状态" prop="pay_status" width="150">
                    <template #default="scope">
                        <el-tag v-if='scope.row.pay_status === 1' type="success">已支付</el-tag>
                        <el-tag v-else type="danger">未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" prop="is_send" width="150">
                    <template #default="scope">
                        <el-tag v-if='scope.row.is_send === 1' type="success">已发货</el-tag>
                        <el-tag v-else type="danger">未发货</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" :icon="Link" @click="showDialog(scope.row.id)">查看物流</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-card>
    <el-dialog title="物流信息" v-model="dialogVisible">
        <el-timeline style="max-width: 600px">
            <el-timeline-item v-for="(exp, index) in expressInfo.data" 
                :key="index" 
                :timestamp="exp.update_time">
                {{ exp.content }}
            </el-timeline-item>
        </el-timeline>
    </el-dialog>
</template>

<script setup>
import { ArrowRight, Search, Link } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import api from '../api/index.js'
const orderTable = reactive({
    data: []
})
let dialogVisible = ref(false)

onMounted(() => {
    getOrderList()
})

const getOrderList = async () => {
    api.get_orders().then(res => {
        // console.log(res.data)
        orderTable.data = res.data.data
    })
}

let expressInfo = reactive({
    data: []
})
const showDialog = (id) => {
    dialogVisible.value = true
    api.get_express(id).then(res => {
        expressInfo.data = res.data.data
    })

}
</script>

<style scoped>
.box-card {
    margin-top: 25px;
}
</style>